<template>
    <div class="da">
        <div class="head">
            <van-icon name="arrow-left" @click="$router.history.go(-1)" />
            <div class="photo">
                <img src="http://t15.baidu.com/it/u=2359341218,3752841480&fm=224&app=112&f=JPEG?w=500&h=470&s=7187D31E46A3D4E828B3ABEC0300503A"
                    alt="">
            </div>
            <router-link to="/record">
                <p>微币记录</p>
            </router-link>
        </div>
        <div class="wei">
            <p>我的微币</p>
            <span>5</span>
        </div>
        <div class="day">
            <div class="qian">
                <p>每日签到</p>
                <p>签到天数</p>
            </div>
            <van-button round type="info" size="mini" color="#fcdf2c">签到</van-button>
        </div>
        <ul class="dao">
            <li v-for="item in list">
                <img :src="item.src" alt="">
                <div class="wenzi">
                    <p>{{ item.til }}</p>
                    <span>{{ item.tils }}</span>
                </div>
                <b>{{ item.tab }}</b>
            </li>
        </ul>

    </div>
</template>

<script>
export default {
    data() {
        return {

            list: [
                {
                    til: '每日打卡签到小任务',
                    tils: '登录微钓app并完成打卡签到',
                    tab: '打卡签到',
                    src: require("../../assets/img/images-qiandao/1.jpg"),
                },
                {
                    til: '观看广告奖励',
                    tils: '完整观看广告即可',
                    tab: '今日1/5',
                    src: require("../../assets/img/images-qiandao/1.jpg"),

                },
                {
                    til: '购买鱼票任务奖励',
                    tils: '查看并购买钓场发布的线上鱼票',
                    tab: '可重复完成',
                    src: require("../../assets/img/images-qiandao/1.jpg"),

                },
                {
                    til: '微钓商城购买商品',
                    tils: '购买商品并下单奖励微币退单扣除微币奖励',
                    tab: '可重复完成',
                    src: require("../../assets/img/images-qiandao/1.jpg"),

                },
                {
                    til: '分享商品到微信',
                    tils: '将正品渔具分享到微信',
                    tab: '今日1/3',
                    src: require("../../assets/img/images-qiandao/1.jpg"),

                },
                {
                    til: '查看鱼讯任务',
                    tils: '查看钓场渔汛',
                    tab: '今日1/3',
                    src: require("../../assets/img/images-qiandao/1.jpg"),

                },
                {
                    til: '给渔汛点赞',
                    tils: '查看渔汛并进行点赞',
                    tab: '今日1/3',
                    src: require("../../assets/img/images-qiandao/1.jpg"),

                },
                {
                    til: '分享渔汛到微信',
                    tils: '将精彩的渔汛分享到微信',
                    tab: '可重复完成',
                    src: require("../../assets/img/images-qiandao/1.jpg"),

                },
            ]
        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style scoped lang="scss">
.da {
    position: relative;
    background: #f4f4f4;

    .head {

        .van-icon {
            color: #fff;
            position: absolute;
            left: 5px;
            top: 10px;
        }

        .photo {
            height: 35vh;

            img {
                width: 100%;
                height: 100%;
            }
        }

        p {
            position: absolute;
            right: 5px;
            top: 0px;
            font-size: 12px;
            color: #fff;
        }
    }

    .wei {
        background: #772ffb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: absolute;
        top: 25vh;


        p {
            color: #c68dff;
            font-size: 16px;
            padding: 20px 10px 20px 10px;
        }

        span {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 10px double #fcdf2c;
            color: #fff;
            font-size: 36px;
            text-align: center;
            margin-right: 20px;
        }
    }

    .day {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        width: 80%;
        padding: 10px;
        border-radius: 5px;
        margin-top: 35px;
        margin-left: 30px;
        margin-bottom: 10px;

        .qian {
            width: 40%;
            display: flex;
            justify-content: space-between;

            p {
                color: #323232;
                font-size: 12px;
            }
        }

    }

    .dao {
        width: 100%;
        background: #fff;
        overflow: hidden;

        li {
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 10px;

            img {
                width: 50px;
                height: 50px;
            }

            .wenzi {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-between;
                width: 50%;

                p {
                    font-size: 14px;
                    color: #333333;
                }

                span {
                    font-size: 12px;
                    color: #a1a1a1;
                }
            }

            b {
                font-weight: normal;
                font-size: 12px;
                color: #989898;
            }
        }

    }
}
</style>